<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人介绍</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 左边区域设置 -->
    <div class="aside">
        <!-- 头像 -->
        <div class="avator">
            <img src="image/WechatIMG2.jpg" >
            <p>翟梦飞 </p>
            <p>软件测试工程师</p>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li>
                    
                    <a href="#content">
                        <i class="fa fa-user-circle-o"></i>
                        介绍
                    </a>
                    
                </li>
                
                <li>
                    
                    <a href="#about">
                        <i class="fa fa-address-card"></i>
                        关于我
                    </a>
                    
                </li>
                <li>
                    <a href="#works">
                        <i class="fa fa-file"></i>
                        我的作品
                    </a>
                    </li>
                <li>
                    <a href="#contact">
                        <i class="fa fa-volume-control-phone"></i>
                        联系我
                    </a>
                    </li>
            </ul>

        </div>
        <!-- 链接 -->
        <div class="links">
            <a href="https://weibo.com/u/7156891407">
                <i class="fa fa-weibo"></i>
            </a>
            <a href="https://github.com/ryanmcdermott/trump-speeches">
                <i class="fa fa-github"></i>
            </a>
            <a href="https://www.linkedin.com/in/%E5%BB%BA%E5%9B%BD-%E5%B7%9D-74983a1b5/">
                <i class="fa fa-linkedin"></i>
            </a>
            <a href="https://www.facebook.com/DonaldTrump/">
                <i class="fa fa-facebook"></i>
            </a>

        </div>

        

    </div>


    <!-- 右边区域设置 -->
    <div class="content" id="content">
        <!-- 右上背景图片 -->
        <div class="content-top">
            <h1>翟梦飞|前端开发工程师</h1>
            <p>前端开发技术大牛🐮，技术一流，掌握最先进的技术</p>
        </div>
        <!-- 右主要内容 -->
        <div class="container">
            
            <!-- 关于我 -->
            <div class="about" id="about">
                <h2>关于我</h2>
                <img src="image/WechatIMG3.jpeg" alt="图片">
                <p>JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、JavaScript函数式编程、JavaScript设计模式
                
                    性能优化、版本控制工具、模块化、项目构建工具
                  
                    React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
                    
                    原生小程序入门、原生小程序API使用、小程序框架Mpvue</p>
            </div>
            <!-- 分割线 -->
            <hr >
            <!-- 我的作品 -->
            <div class="works" id="works">
                <h2>我的作品</h2>
                <p>我的作品，都是精品！现在还没有什么作品，半年以后就能让你看到我的厉害！先占个坑吧，哇咔咔</p>
                <img src="image/WechatIMG4.jpeg" alt="">
                <img src="image/WechatIMG5.jpeg" alt="">
                <img src="image/WechatIMG6.jpeg" alt="">
                <img src="image/WechatIMG7.jpeg" alt="">
                <img src="image/WechatIMG8.jpeg" alt="">
                <img src="image/WechatIMG9.jpeg" alt="">
            </div>
            <hr>

            <!-- 联系我 -->
            <div class="contact" id="contact">
                <h2> 联系我😯</h2>
                <p>
                    人生在世，十有八九不如意😔！当你对过去充满遗憾，当你对生活失去希望，当你对未来产生迷茫，当你对金钱💰没有兴趣时，请及时联系我，留下你的姓名邮箱📮，畅所欲言你的故事，我定是你忠实的听众。虽然不能给你荣华富贵，定陪你寻找人生方向！奥利给😊
                </p>
                <input type="text" placeholder="请输入姓名">
                <input type="text" placeholder="请输入邮箱">
                <textarea placeholder="请输入留言"></textarea>
                <button>提交</button>
            </div>
            <hr>
            <!-- 页脚 -->
            <div class="footer">
                &copy;版权所有

            </div>


        </div>


    </div>

    
</body>
</html>